<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../day23/封装cookie.JS"></script>
</head>

<body>
    <button class="add">新增</button>
    <button class="get">获取</button>
</body>
<script>
    // 能否在保留数组和对象结构的情况下 将其转化为字符串
    var arr = [1, 2, 3];   // '[1, 2, 3]'
    var obj = { a: 1, b: 2 }; // '{ "a": 1, "b": 2 }'


    /* var enArr = '[' + arr.join(',') + ']';
    console.log(enArr);

    var list = [];
    for (var key in obj) {
        var val = obj[key];
        var str = `"${key}":${val}`;  // "a": 1
        list.push(str);
    }
    console.log(list);
    var enObj = '{' + list.join(',') + '}';
    console.log(enObj);

    // 解析
    var brr = eval(enArr);
    console.log(brr);

    var o = eval("(" + enObj + ")");
    console.log(o); */



    // 数组和对象  保留结构的情况下 转化为字符串(json字符串 => 有数组和对象结构的字符串)
    // JSON.stringify()    在保留数组和对象结构的情况下 将其转化为字符串(json字符串)
    // JSON.parse()        将JSON字符串解析为数组/对象

    // JSON.stringify() JSON.parse() 配合可以实现数组或对象的深拷贝

    console.log(JSON);

    var arr = [1, 2, 3];   // '[1, 2, 3]'
    var obj = { a: 1, b: 2 }

    //  JSON.stringify()
    var enArr = JSON.stringify(arr);
    console.log(enArr);
    var enObj = JSON.stringify(obj);
    console.log(enObj);

    // JSON.parse() 
    var brr = JSON.parse(enArr);
    console.log(brr);

    var o = JSON.parse(enObj);
    console.log(o);





</script>
<script>
    /* 
    cookie使用时需要注意的问题
    (1) cookie不能跨网站
    (2) cookie不能跨浏览器
    (3) 某些浏览器(低版本)使用cookie存储中文会乱码   
        解决方案: 浏览器提供了中文编码和解码的全局方法
            a.  将中文存储到cookie之前 先借助encodeURIComponent()进行编码
            a.  获取cookie只有 在借助decodeURIComponent()进行解码
    (4) cookie是以键值对形式存在字符串 => 键值是字符串类型 => 如果存储其他类型的数据 => 都是隐式转字符串
        像数组,对象 直接存储到cookie中 有问题
        解决方法:  能否在保留数组和对象结构的情况下 将其转化为字符串
    (5)  cookie 依赖于服务器环境 ，即设置和获取cookie时
    */



    var add = document.getElementsByClassName("add")[0];
    var get = document.getElementsByClassName("get")[0];

    add.onclick = function () {
        setCookie("num", 100);
        setCookie("str", "hello");
        setCookie("bool", true);
        setCookie("a", null);

        // var arr = [1, 2, 3];
        // var obj = { a: 1, b: 2 };
        // setCookie("arr", arr);
        // setCookie("obj", obj);

        var arr = [1, 2, 3];
        var obj = { a: 1, b: 2 };
        setCookie("arr", JSON.stringify(arr));
        setCookie("obj", JSON.stringify(obj));
    }

    get.onclick = function () {
        console.log(getCookie("num"));
        console.log(getCookie("str"));
        console.log(getCookie("bool"));
        console.log(getCookie("a"));
        console.log(JSON.parse(getCookie("arr")));
        console.log(JSON.parse(getCookie("obj")));
    }





</script>

</html>